<div class="dialog">
    <h1>{{i18n "dialog.preferences.pdf.title"}}</h1>
    <form action="" method="GET" id="dialog">
        <div id="prefs-tabs" class="clear">
            <ul>
                <li><a href="#prefs-tabs-general">{{i18n "dialog.preferences.pdf.metadata"}}</a></li>
                <li><a href="#prefs-tabs-page">{{i18n "dialog.preferences.pdf.page"}}</a></li>
                <li><a href="#prefs-tabs-font">{{i18n "dialog.preferences.pdf.font"}}</a></li>
            </ul>
            <!-- Metadata for PDF files -->
            <div id="prefs-tabs-general">
                <p>{{i18n "dialog.preferences.pdf.metadata_intro"}}</p>
                <label for="pdf.author">{{i18n "dialog.preferences.pdf.author_label"}}</label>
                <input type="text" name="pdf.author" id="pdf.author" value="{{pdf.author}}" placeholder="{{i18n "dialog.preferences.pdf.author"}}">
                <label for="pdf.keywords">{{i18n "dialog.preferences.pdf.keywords_label"}}</label>
                <input type="text" name="pdf.keywords" if="pdf.keywords" value="{{pdf.keywords}}" placeholder="{{i18n "dialog.preferences.pdf.keywords"}}">
                <hr>
                <label for="textpl">{{i18n "dialog.preferences.pdf.textpl"}}</label>
                <div class="input-button-group">
                  <input type="text" name="pdf.textpl" id="textpl" value="{{pdf.textpl}}">
                  <button type="button" class="request-file"
                  data-tippy-content="{{i18n "dialog.preferences.choose_file"}}"
                  data-request-name="TeX Template File"
                  data-request-ext="tex"
                  data-request-target="#textpl"><clr-icon shape="file"></clr-icon></button>
                </div>
            </div>
            <!-- Page layout -->
            <div id="prefs-tabs-page">
                <p>{{i18n "dialog.preferences.pdf.page_intro"}}</p>
                <hr>
                <div class="clear"></div>
                <div class="box-left">
                    <div class="paper a4paper">
                        <input class="tmargin" type="number" min="0" max="9999" step="0.1" name="pdf.tmargin" id="pdf.tmargin" value="{{pdf.tmargin}}" placeholder="{{i18n "dialog.preferences.pdf.tmargin"}}" data-tippy-content="{{i18n "dialog.preferences.pdf.tmargin_label"}}">
                        <input class="rmargin" type="number" min="0" max="9999" step="0.1" name="pdf.rmargin" id="pdf.rmargin" value="{{pdf.rmargin}}" placeholder="{{i18n "dialog.preferences.pdf.rmargin"}}" data-tippy-content="{{i18n "dialog.preferences.pdf.rmargin_label"}}">
                        <input class="bmargin" type="number" min="0" max="9999" step="0.1" name="pdf.bmargin" id="pdf.bmargin" value="{{pdf.bmargin}}" placeholder="{{i18n "dialog.preferences.pdf.bmargin"}}" data-tippy-content="{{i18n "dialog.preferences.pdf.bmargin_label"}}">
                        <input class="lmargin" type="number" min="0" max="9999" step="0.1" name="pdf.lmargin" id="pdf.lmargin" value="{{pdf.lmargin}}" placeholder="{{i18n "dialog.preferences.pdf.lmargin"}}" data-tippy-content="{{i18n "dialog.preferences.pdf.lmargin_label"}}">
                    </div>
                </div>
                <div class="box-right">
                    <label for="pdf.margin_unit">{{i18n "dialog.preferences.pdf.unit_label"}}</label>
                    <select name="pdf.margin_unit" id="pdf.margin_-unit">
                      {{#each availableMarginUnits}}
                        <option value="{{this}}" {{#ifCond this '=' ../pdf.margin_unit}}selected="selected"{{/ifCond}}>{{this}}</option>
                      {{/each}}
                    </select>
                    <hr>
                    <label for="pdf.papertype">{{i18n "dialog.preferences.pdf.papertype"}}</label>
                    <select name="pdf.papertype">
                      {{#each supportedPapertypes}}
                        <option value="{{this}}" {{#ifCond this '=' ../pdf.papertype}}selected="selected"{{/ifCond}}>{{this}}</option>
                      {{/each}}
                    </select>
                    <hr>
                    <label for="pdf.pagenumbering">{{i18n "dialog.preferences.pdf.pagenumbering_label"}}</label>
                    <select name="pdf.pagenumbering">
                      {{#each availablePageNumberingSystems}}
                        <option value="{{this}}" {{#ifCond this '=' ../pdf.pagenumbering}}selected="selected"{{/ifCond}}>{{i18n "dialog.preferences.pdf.pagenumbering_" this }}</option>
                      {{/each}}
                    </select>
                </div>
                <div class="clear"></div>
            </div>
            <!-- Font options -->
            <div id="prefs-tabs-font">
                <p>{{i18n "dialog.preferences.pdf.font_intro"}}</p>
                <div class="box-left">
                    <label for="pdf.mainfont">{{i18n "dialog.preferences.pdf.mainfont_label"}}</label>
                    <input type="text" name="pdf.mainfont" id="mainfont" value="{{pdf.mainfont}}" placeholder="{{i18n "dialog.preferences.pdf.mainfont"}}">
                    <label for="pdf.sansfont">{{i18n "dialog.preferences.pdf.sansfont_label"}}</label>
                    <input type="text" name="pdf.sansfont" id="sansfont" value="{{pdf.sansfont}}" placeholder="{{i18n "dialog.preferences.pdf.sansfont"}}">
                    <label for="pdf.fontsize">{{i18n "dialog.preferences.pdf.fontsize_label"}}</label>
                    <input type="number" min="0" max="10000" step="1" name="pdf.fontsize" id="fontsize" value="{{pdf.fontsize}}" placeholder="{{i18n "dialog.preferences.pdf.fontsize"}}">
                    <label for="pdf.lineheight">{{i18n "dialog.preferences.pdf.lineheight_label"}}</label>
                    <input type="number" min="0" max="1000" step="1" name="pdf.lineheight" id="lineheight" value="{{pdf.lineheight}}" placeholder="{{i18n "dialog.preferences.pdf.lineheight"}}">
                </div>
                <div class="box-right">
                    <!-- This is the preview tab. It shows how everything will look afterwards. -->
                    <h1 class="pdf-preview">Lorem Ipsum Dolor</h1>
                    <p class="pdf-preview">
                        Lorem ipsum dolor sit amet, consectetur adipisici elit,
                        sed eiusmod tempor incidunt ut labore et dolore magna
                        aliqua. Ut enim ad minim veniam, quis nostrud
                        exercitation ullamco laboris nisi ut aliquid ex ea
                        commodi consequat. Quis aute iure reprehenderit in
                        voluptate velit esse cillum dolore eu fugiat nulla
                        pariatur. Excepteur sint obcaecat cupiditat non proident,
                        sunt in culpa qui officia deserunt mollit anim id est
                        laborum.
                    </p>
                </div>
            </div>
        </div>
        <div class="clearfix">
            <button type="submit" id="pref-save">{{i18n "dialog.button.save"}}</button>
            <button id="abort">{{i18n "dialog.button.cancel"}}</button>
            <span class="error-info"></span>
        </div>
    </form>
</div>
